home
***
CD-ROM
|
disk
|
FTP
|
other
***
search
/
Cream of the Crop 22
/
Cream of the Crop 22.iso
/
editor
/
sshtml10.zip
/
HTML.TXT
< prev
next >
Wrap
Text File
|
1996-09-20
|
120KB
|
3,475 lines
Servile Software
Guide To HTML
Edition 1.0
Compiled by Matthew Probert
Disclaimer
This document is supplied in good faith, however no responsibility can
be accepted for the accuracy of the information contained herein or
any loss or damage resulting from any advice given or implied by the
author.
This document mentions several HTML viewers and companies by name,
this is not intended as an endorsment of any company or product.
All trademarks are recognised as belonging to their respective owners.
Introduction
First people communicated ideas through hand signals and voice, then
drawings on cave walls then through hand painted manuscripts and later
printed paper books and leaflets. With the advent of the computer came
the facility to publish documents not on paper, but electronicaly
instead. The computer screen displaying the document, rather than it
being laid out on a leaf of paper.
Publishing information electronicaly requires some medium to present
the information to the reader. A graphics viewer is used to access
pictures, for example. An HTML viewer (or web browser as they are
commonly known) is a program which presents electronic documents, in
HTML format, to the reader.
The HyperText Mark-up Language (HTML) is a simple data format used to
create formatted electronic documents with hyperlinks to other
documents and resources (this hyperlinking to other documents is known
as hypertext) that are portable from one computer platform to another.
That is, an HTML document created on a PC may also be read by a user
of a UNIX machine or an Atari, Macintosh and so on. The term "mark-up"
is a printing expression describing the process of putting together
words and picture to form a document. HTML, is used electronically to
put together words (text) and pictures (images) into a finished
presentation document. Recent inovations mean that video clips and
sound can also be added, making HTML a full multimedia publishing
medium.
You will probably be familiar with the idea of formatted documents,
these are produced by word processors. A formatted document has a
variation in its appearance. It looks pretty. Where as an unformatted
document has all the text in one style. Links to other documents and
resources may be a newer idea for you.
A standard formatted document simply conveys information, and may
suggest other sources of information to the reader. A hypertext
document does the same, but where a suggestion of other information is
made a provision is made for the reader to click the mouse button or
press a keyboard button and the program being used to view the
hypertext document will load and display the linked document.
For example, this is a formatted text document that you are reading.
If I wish to refer you to another document, titled "order.doc" to view
that document you need to select the file option from your viewer
software, and open the named file. With a hypertext document, you
could simply point the mouse to the words "order.doc" which would be
displayed in a different colour, and click the mouse button to ask the
viewer software to load and display the document. Of course as the
author of the document, I would have to include some instruction to
the viewer software that would enable you to do that. These
instructions form part of the HTML language. They are called
"hyperlinks" and provide a path to other documents or resources,
called Uniform Resource Locations, or URLs for short.
HTML documents are viewed with an HTML viewer, or "web browser" as
they are starting to be known in PC circles. The most common HTML
viewers used by PC users are Microsoft's Internet Explorer and
Netscape's Navigator. But there are others. Mosaic, by NCSA is
available in a number of custom Internet packages including Quarter-
deck's Internet connectivity package and is perhaps the next most
widely used. What is less well known is that all HTML viewers present
HTML documents slightly differently. Although HTML is specified, HTML
viewers do not pay too much attention to the official specifications
and manufacturers have added support (both documented and not!) for a
variety of additional features and commands including built-in Java
compilers to understand Java code and support for Frames.
If you are publishing your document for a known audience, you should
know which HTML viewer will be used to access the document, and you
should be aware of the facilities supported by that viewer. When
publishing for the World Wide Web you should remember that your
audience is comprised of millions of people, with dozens of different
HTML viewers, which whilst supporting basic features, have many
discrepancies in their support of advanced features. Some may not even
have the ability to display images. So while this e-text describes and
illustrates many features found only in one or two HTML viewers, it
should not be viewed as a recommendation to use these features for
general HTML publishing.
Basic Concepts
As with any aspect of computing, HTML introduces some new concepts and
jargon. It is necessary to be familiar with these basic terms in order
to understand the rest of this document.
Tags:
Tags provide instructions to an HTML viewer about elements such as
headings, paragraphs, lists, character highlighting, and hyperlinks.
Most HTML elements are identified in a document as a start-tag
followed by an end tag. The start-tag provides the HTML viewer with
the element name and attributes, followed by the content. The end-tag
tells the HTML viewer about the end of the element. Start-tags are
delimited by `<'and `>'; end tags are delimited by `</' and `>'.
For example:
<H1>This is a Heading</H1>
In the above example the start-tag is <H1> and the end-tag is </H1>
Comments:
To include comments in an HTML document, use a comment declaration. A
comment declaration consists of `<!' followed by zero or more comments
followed by `>'. Each comment starts with `_`and includes all text up
to and including the next occurrence of `_`. In a comment declaration,
white space is allowed after each comment, but not before the first
comment. The entire comment declaration is ignored.
For example:
<!-- This is a comment -->
<!-- This is a multiple-line
comment -->
Head:
The head of an HTML document, defined by the start-tag <HEAD> and
delimited by the end-tag </HEAD>, is where heading information about
the document goes. The heading information is an unordered collection
of information about the document, such as the title of the document.
For example:
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
This example declares the document title to the HTML viewer as
"Document Title".
The title element contains your document title and identifies its
content in a global context. The title is displayed somewhere on the
HTML viewer window (usually at the top), but not within the document
area. The title is also used for bookmarking and during a WAIS search
of a server and should be less than 64 characters long.
Title:
Every HTML document must contain a TITLE element. The title should
identify the contents of the document in a global context. A short
title, such as "Introduction" may be meaningless out of context. A
title such as "Introduction to HTML Elements" is more appropriate. An
HTML viewer may display the title of a document in a history list or
as a label for the window displaying the document.
Body:
The BODY section of an HTML document is where the text to be displayed
is placed. This is the largest section of an HTML document, and is
defined by the start-tag <BODY> and terminated by the end-tag </BODY>
For example:
<BODY>
This is displayed in the HTML viewer text window
</BODY>
Headings:
Headings are generally displayed in a larger type-face (or font) than
the main text. HTML provides two systems for declaring a heading.
The old system, which is recognised by all HTML viewers, supports six
sizes of text declared by the start-tags <H1>, <H2>, <H3>, <H4>, <H5>
and <H6>, each of which has a corresponding end-tag such as </H1>,
</H2> and so on. The text sizes range from <H1> the biggest, through
<H3> the default size to <H6> the smallest.
For example:
<H1>This is a large heading</H1>
<H3>This is in the normal default size</H3>
<H6>This is very small!</H6>
Paragraphs:
Unlike most word processors, HTML viewers ignore carriage returns, and
additionally multiple spaces are reduced to a single space. The
paragraph command (<P> and </P>) tells the HTML viewer that the text
contained within the start-tag and end-tag is a paragraph. Paragraphs
are displayed by the HTML viewer separated by a single blank line from
the preceding items.
For example:
<P>
This is a paragraph.
This second line is actually displayed by an HTML viewer on the same
line as the previous line, as the carriage return is ignored.
</P>
<P>
This second paragraph is displayed with a single blank line between
it and the previous paragraph.
</P>
This results in the following to be displayed by an HTML viewer:
This is a paragraph. This second line is actually displayed by an
HTML viewer on the same line as the previous line, as the carriage
return is ignored.
This second paragraph is displayed with a single blank line between
it and the previous paragraph.
Alignment:
Text and images may be aligned to the left, to the right or centred.
For example:
Left alignment
Right alignment
Center alignment
Lists:
A list is simply a list of items. The HTML viewer automatically starts
each list item on a new line, and handles list numbering and bulleting
depending upon how the HTML author has declared the list.
Base URL:
The Base URL gives the HTML viewer a point of reference for
hyperlinks. Usually the base URL is not specified, and is taken as the
URL address of the current document.
Hyperlinks:
Hyperlinks are a provision allowing the user of the HTML document to
navigate through the document and to external resources. Hyperlinks
may be local, allowing navigation within the currently loaded
document, or external providing access to other documents not loaded
and resources such as ftp servers and mail servers. Navigation through
hyperlinks usually occurs by positioning the pointer over the link
with the mouse, and then pressing the left mouse button. The hyperlink
may be displayed to the user either as text, in which case it will
normally be displayed in a distinctive colour and underlined, or as an
image. In both cases, when the pointer passes onto a hyperlink it will
change shape indicating a selectable hyperlink.
Meta:
The META element is an extensible container for use in identifying
specialized document meta-information. Meta-information has two main
functions:
1) to provide a means to discover that the data set exists and how it
might be obtained or accessed; and
2) to document the content, quality, and features of a data set,
indicating its fitness for use.
Each META element specifies a name/value pair. If multiple META
elements are provided with the same name, their combined contents -
concatenated as a comma-separated list - is the value associated with
that name.
HTTP servers may read the content of the document HEAD to generate
header fields from certain Meta information. WWW Search Engines also
may make use of META information to automatically build an entry for a
site.
Forms:
Forms provide a mechanism for passing information from the HTML viewer
back to a program at the web server or through email to you.
A Basic HTML Document
A simple HTML document is comprised of the following components:
An HTML declaration tag: <HTML>
A heading tag: <HEAD>
A title, such as: <TITLE>Title text</TITLE>
A body declaration tag: <BODY>
The main body of the document.
A body termination tag </BODY> and finally an HTML termination tag:
</HTML>
For example:
<HTML>
<HEAD>
<TITLE>Example HTML Document</TITLE>
<BODY>
This is an example HTML document.
</BODY>
</HTML>
Adding Headings:
Headings can be added to an HTML document with the heading tags;
<H1> through <H6>.
An example HTML document using a heading:
<HTML>
<HEAD>
<TITLE>Example HTML Document</TITLE>
<BODY>
<H1>Main Heading</H1>
<P>
This is an example HTML document.
</P>
</BODY>
Notice the use of the paragraph start-tag <P> and end-tag </P> which
tells the HTML viewer to display the text as a new paragraph, and not
as a continuation of the heading line. Newer HTML viewers, such as
Netscape Navigator and Microsoft Internet Explorer aslo support more
advanced formatting for headings and other text, but this will be
covered later.
Simple Formatting
HTML viewers do not recognise carriage-returns in the text. Instead,
they display the text as continuous lines, breaking each line at a
word end so that it fits in the text window. This is known as word-
wrap. You can force a line break with the HTML tag <BR>.
For example:
This is line one<BR>This is line two
Which displays as:
This is line one
This is line two
Blank lines can be inserted by using multiple occurrences of the <BR>
tag, thus:
This is line one<BR><BR>This is line two
Which displays as:
This is line one
This is line two
When text flows around a figure or table in the margin, you sometimes
want to start an element like a header, paragraph or list below the
figure rather than alongside it. The CLEAR command allows you to move
down unconditionally:
CLEAR=LEFT move down until left margin is clear
CLEAR=RIGHT move down until right margin is clear
CLEAR=ALL move down until both margins are clear
Alternatively, you can decide to place the element alongside the
figure just so long as there is enough room. The minimum width needed
is specified as:
CLEAR="100 pixels" move down until there is at least 100 pixels
free
For example:
<BR CLEAR=LEFT>
Centring a line of text is also easy. The HTML tag <CENTER> causes all
subsequent text and images to be displayed in the centre of the text
window until a </CENTER> end-tag is reached.
For example:
<HTML>
<HEAD>
<TITLE>Example HTML Document</TITLE>
<BODY>
<CENTER>
<H1>Main Heading</H1>
</CENTER>
<P>
This is an example HTML document.
</P>
</BODY>
If you just want to centre a single heading, you can use the "align="
command within the heading tag, for example:
<H1 align=center>
The example HTML document would then look like this:
<HTML>
<HEAD>
<TITLE>Example HTML Document</TITLE>
<BODY>
<H1 align=center>Main Heading</H1>
<P>
This is an example HTML document.
</P>
</BODY>
This will display as:
Main Heading
This is an example HTML document.
The ALIGN= command may also be added to the paragraph tag, <P> to
align an entire paragraph, for example:
<P ALIGN=CENTER>
In addition to defining the size of the typeface used to display text
(heading), HTML also supports bold, italic, strikethrough, underline,
subscript and superscript formats. The following example illustrates
the popular formatting tags:
<HTML>
<HEAD>
<TITLE>Example HTML Document</TITLE>
<BODY>
<H1 align=center>Main Heading</H1>
<P>
This is an example HTML document illustrating some basic text
formatting tags.
<P>
<B>Bold</B>
<P>
<I>Italic</I>
<P>
<SUB>Subscript</SUB>
<P>
<U>Underline</U>
<P>
<SUP>Superscript</SUP>
<P>
<STRIKE>Strikeout</STRIKE>
<P>
<TT>Typewriter (fixed width font)</TT>
<P>
<PRE>Preformatted (used for displaying source code etc.)</PRE>
</BODY>
Formatting tags may also be nested to create multiple effects such as
BOLD ITALIC, for example:
<B><I>This is Bold Italic</I></B>
But you must remember to end-tag in the reverse order to the start-
tags to keep the nesting correct.
Blockquote:
Text defined as a "blockquote" is displayed as a new paragraph, and
usually displayed indented from the left margin, and with some HTML
viewers in a unique typeface. A blockquote is declared by the tag pair
<BLOCKQUOTE> and </BLOCKQUOTE>, for example:
<BLOCKQUOTE>
This text will normally be displayed indented, and if viewed with
Mosaic, displayed in a unique font type face.
</BLOCKQUOTE>
Address:
Text defined as an "address block" is displayed as a new paragraph and
usually in italic. An address is declared by the tag pair <ADDRESS >
and </ADDRESS >, for example:
<ADDRESS>
This text will normally be displayed in italic.
</ADDRESS>
Emphasis:
Emphasised text is declared by the tag pair <EM> and </EM> and is
usually displayed in italic.
Strong:
Strong text is declared by the tag pair <STRONG> and </STRONG> and is
usually displayed in bold.
Citation:
Citation text is declared by the tag pair <CITE> and </CITE> and is
usually displayed in italic.
Source Code:
Source code is declared by the tag pair <CODE> and </CODE> and is
usually displayed in a fixed width font, though this may be changed by
the user of the HTML viewer.
Sample Output:
Sample Output is declared by the tag pair <SAMP> and </SAMP> and is
usually displayed in a fixed width font, though some HTML viewers
(notably Mosaic) allow the user to change this.
Keyboard Input:
"Keyboard Input" is declared by the tag pair <KBD> and </KBD> and is
usually displayed in a different font face and style to the ordinary
text.
Variable:
Variable text is declared by the tag pair <VAR> and </VAR> and is
usually displayed in either a fixed width font or an italic font to
emphasis it.
Big:
Big text is declared by the tag pair <BIG> and </BIG> and is usually
displayed larger than the ordinary text, but without the new line
which accompanies a heading <Hn> tag.
Small:
Small text is declared by the tag pair <SMALL> and </SMALL> and is
usually displayed smaller than the ordinary text, but without the new
line which accompanies a heading <Hn> tag.
Dividers
HTML provides three basic ways of dividing a document window:
Paragraphs, Line Breaks, and Horizontal Rules.
Paragraphs are contained within a <P> and </P> tag pair, although the
end-tag </P> is not needed if another paragraph starts with a <P>
start-tag. Paragraphs may be aligned, with the "align=" command, for
example:
<P>
A standard paragraph
<P align=center>
Center aligned paragraph
<P align=left>
Left aligned paragraph
<P align=right>
Right aligned paragraph
Line breaks are enforced with the <BR> tag. When an HTML viewer
encounters the <BR> tag, the cursor is moved down one line and to the
left of the window. If an alignment is in operation, the next
displayed line will be aligned correctly.
Horizontal rules are affected with the <HR> tag. This tells the HTML
viewer to display a graphical horizontal line across the entire width
of the window. The form of the rule can be amended with the optional
"size=", "width=", "noshade" and "align=" parameters.
The vertical thickness of the horizontal rule can be defined by adding
a size= parameter to the <HR> tag. The number following the size=
parameter tells the HTML viewer how many vertical pixel lines to use
for the rule. For example:
<HR size=4>
By default, a horizontal rule extends the entire width of the window.
The width= parameter may be used to specify the horizontal width of
the rule either in pixels, or as a percentage of the window width:
<HR width=100>
<HR width=50%>
Horizontal rules are usually aligned in the centre of the window, or
if an alignment is in force, they follow the rules of the current
alignment. This may be overridden by the align= parameter, for
example:
<HR align=left>
<HR align=center>
<HR align=right>
Finally, horizontal rules are displayed in a 3d representation. This
can be changed to a solid thick 2 dimensional line with the noshade
parameter:
<HR noshade>
As usual, these parameters can be mixed together, for example:
<HR align=right width=50% size=10 noshade>
Images
Most newer HTML viewers can display pictures, called images, in
various forms. The most popular being GIF and JPEG formats. The
procedure for telling the HTML viewer to display the image is the same
regardless of the image format:
<img src="imagename">
For example:
<img src="picture.gif">
Will cause the HTML viewer to display the image "picture.gif".
Some HTML viewers cannot display images, so you can provide text which
will be displayed by these viewers instead of the image by including
it with the "alt=" parameter, for example:
<img src="picture.gif" alt="Picture of a tree">
The image may be aligned in relation to the surrounding text using the
optional "align=" parameter. If no alignment parameter is specified,
text following the image will be displayed at the bottom right of the
image. Different HTML viewers handle the alignment of text and images
differently, so be careful!
The size of the image can be declared to the HTML viewer with the
optional "width=" and "height=" parameters. If these are not
specified, the HTML viewer will display the image at its full size. If
however you specify these size parameters, the image will be displayed
to the specified size in pixels. For example:
<img src="picture.gif" width=640 height=480>
Lists
HTML supports a number of types of list: Ordered, Unordered,
Definition, Menu and Directory.
Ordered lists are displayed one item per line, with a sequential
numbering system to the left of each item. An ordered list is declared
by the start-tag <OL> and terminated with the end-tag </OL>.
Individual items are declared with the tag <LI>. For example:
<OL>
<LI> Item one
<LI> Item two
<LI> Item three
</OL>
Which is displayed by an HTML viewer as:
1. Item one
2. Item two
3. Item three
The numbering system may be amended with the optional TYPE= command.
The valid types are A,a,I,i,1 giving the following displays:
A. Item one
B. Item two
C. Item three
a. Item one
b. Item two
c. Item three
I. Item one
II. Item two
III. Item three
i. Item one
ii. Item two
iii. Item three
1. Item one
2. Item two
3. Item three
The starting number may be defined by adding a START= command to the
ordered list declaration, for example:
<OL START=100>
Which then produces the following display:
100. Item one
101. Item two
102. Item three
The numbering order may be further amended during the list by adding a
VALUE= command to a list item declaration, for example:
<OL START=100>
<LI> Item one
<LI VALUE=500> Item two
<LI> Item three
</OL>
Which produces the following display:
100. Item one
500. Item two
501. Item three
An unordered list is displayed without numbering, but with bullets,
for example:
<UL>
<LI> Item one
<LI> Item two
<LI> Item three
</UL>
Which is displayed by an HTML viewer as:
■ Item one
■ Item two
■ Item three
Some HTML viewers allow the bullet style to be redefined with a TYPE=
command, accepting the values DISC, CIRCLE and SQUARE, for example:
<UL TYPE=SQUARE>
<LI> Item one
<LI> Item two
<LI> Item three
</UL>
Directory lists, specified by the <DIR> element, are similar to
unordered lists. They represent a list of short items, typically up to
20 characters each. Items in a directory list may be arranged in
columns, typically 24 characters wide, but may not be nested (unlike
other lists). Some HTML viewers will further display directory lists
in a different font to other lists.
Menu lists are effectively the same as unordered lists, but link
directory lists may not be nested and some HTML viewers can display
them in a different font (notably Mosaic) to differentiate them from
other unordered lists.
Definition lists are used for listing terms and their definitions. A
definition list is declared with the start-tag <DL>, and rather than
using the list item tag <LI>, it uses a pair of tags, data-term and
data-definition, <DT> and <DD> respectively. The data-definition is
displayed indented from the preceding data-term. For example:
<DL>
<DT>Definition one
<DD> Description of definition one which can wrap around to more
than one line
<DT>Definition two
<DD> Description two which can wrap around<BR>to more than one line
<DT>Definition three
<DD> Description of definition three
</DL>
Which is displayed by an HTML viewer as:
Definition one
Description of definition one which can wrap around to
more than one line
Definition two
Description of definition two which can also wrap around
to more than one line
Definition three
Description of definition three
Hyperlinks
Hyperlinks enable the user of an HTML document to navigate through the
currently loaded document (using local hyperlinks) and to external
resources.
All hyperlinks are defined in the HTML source code by anchors. An
anchor is the following HTML code:
<A HREF="destination">hyperlink display</A>
For example:
<A HREF="http://part_two.htm">Part Two</A>
Would create a hyperlink to the resource "part_two.htm" which is
expected by the HTML viewer to be an HTML document in the current
directory (known as the base URI). The HTML viewer knows to terminate
displaying text as a hyperlink by the anchor end-tag </A>. To the
user, the hyperlink would be displayed as:
Part Two
An image could be used instead of the text, by replacing the hyperlink
display text with an inline image command, for example:
<A HREF="http://part_two.htm"><img src="part2.gif"></A>
Local hyperlinks:
Local hyperlinks, known as "Fragment Identifiers", are defined in a
hypertext address by a # character following the resource. If
navigation is required within the local document, the resource may be
omitted so that a local hyperlink may look like:
<A HREF="#introduction">Introduction</A>
Selecting this hyperlink will cause the HTML viewer to search the
current document for a declaration of "introduction". This declaration
is achieved with the anchor name tag <A NAME=>, like this:
<A NAME="Introduction">
Notice that the <A NAME=> tag does not have an end-tag, and is case
insensitive. It doesn't matter if the anchor name is declared as
"INTRODUCTION" or "Introduction" or even "introDuction" it will still
be found by a hyperlink to "#introduction".
Local hyperlinks can be added to hyperlinks to external documents to
force the HTML viewer to load an external document and then navigate
straight to a desired section within that document.
For example:
<A HREF="http://part_two.htm#section_3">Life and Love</A>
Will create a hyperlink to the anchor "section_3" within the HTML
document "part_two.htm".
The following HTML document illustrates the use of local hyperlinks to
form a table of contents to a document. Although this document is very
short, you can see how the principle can be applied to longer and more
complex documents.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TITLE>Local Hyperlink Example HTML document</TITLE>
<P>
<H2>Contents</H2>
<OL>
<LI><A HREF="#AEGIR">Aegir</A>
<LI><A HREF="#AESIR">Aesir</A>
<LI><A HREF="#ASGARD">Asgard</A>
<LI><A HREF="#BALDER">Balder</A>
<LI><A HREF="#BERSERKER">Berserker</A>
<LI><A HREF="#BERTHA">Bertha</A>
<LI><A HREF="#BRAGI">Bragi</A>
</OL>
<A NAME="AEGIR"><I><B>Aegir</B></I>
<P>
In Norse mythology, Aegir is the god of the sea.
<P>
<A NAME="AESIR"><I><B>Aesir</B></I>
<P>
The Aesir were the principal gods in Norse mythology.
They lived in <A HREF="#ASGARD">Asgard</A>.
<P>
<A NAME="ASGARD"><I><B>Asgard</B></I>
<P>
In Norse mythology Asgard was the home of the gods.
<P>
<A NAME="BALDER"><I><B>Balder</B></I>
<P>
In Norse mythology, Balder was the son of Odin and Freya and husband
of Nanna,
and the best, wisest, and most loved of all the gods. He was killed,
at
Loki's instigation, by a twig of mistletoe shot by the blind god
Hodur.
<P>
<A NAME="BERSERKER"><I><B>Berserker</B></I>
<P>
In Norse mythology, a Berserker was a warrior whose frenzy in battle
transformed him into a wolf or bear howling and foaming at the
mouth,
and rendered him immune to sword and flame.
<P>
<A NAME="BERTHA"><I><B>Bertha</B></I>
<P>
In Norse mythology, Bertha is the goddess of spinning.
<P>
<A NAME="BRAGI"><I><B>Bragi</B></I>
<P>
In Norse mythology, Bragi is the god of poetry and eloquence. He was
married
to the goddess Iduna who dwelt in the underworld.
</BODY>
</HTML>
Netscape introduced a number of new commands for hyperlinks. TARGET=
can be used to open the hyperlink document in a new instance of the
HTML viewer, or a specified frame. More about frames later. For
example:
<A HREF=next.htm TARGET=_BLANK>Next Document</A>
When the hyperlink "Next Document" is selected, the document
"next.htm" will be opened and displayed in a new instance of the HTML
viewer.
Hyperlinks are not restricted to other HTML documents. They can be
used to access news servers, gopher servers, send mail and access ftp
servers.
A hyperlink to send mail uses the URL "mailto:"
For example the following link attempts to send an email message to
me:
<A HREF="mailto:probertm@pins.co.uk">Feedback</A>
Some HTML viewers will also support the addition of an optional
subject, to save the user typing it in. For example:
<A HREF="mailto:probertm@pins.co.uk" ?SUBJECT=Feedback>Feedback</A>
Files can be sent to the user through FTP links, to send a specific
file, use something like:
< A HREF="ftp://server/path/filename">Download file</A>
For example:
Download <a
href="ftp://ftp.pins.co.uk/seville/bbsc70.zip">BBSC70.ZIP</A>
The HTML viewer will usually contact the FTP server, and attempt to
connect using the name "anonymous" and sending the user's email
address as a password.
Linking to a gopher server is achieved with the URL gopher:// for
example:
<A HREF="gopher://gopher.pins.co.uk>
Linking to a telnet service is achieved with the telnet:// URL, for
example:
<A HREF="telnet://pins.co.uk">
Linking to a WAIS index server is achieved with the wais:// URL, for
example:
<A HREF="wais://wais.pins.co.uk">
Linking to a news server is achieved with the nntp:// URL, for
example:
<A HREF="nntp://news.pins.co.uk">
Image Maps
Image maps are a number of links defined as areas of a displayed
image. They can be thought of as two distinct components, a map and an
image. The map giving instructions as to the links and the image
simply being a standard inline image. Each pixel of the image can be a
link to another URL if required, but more usually different areas of
the image link to different URLs. The following example illustrates
the use of a simple image map. The image is displayed as normal with
an <IMG> tag, but with the addition of the USEMAP command to indicate
that the inline image is an image map. For example:
<IMG SRC="map.gif" USEMAP="sample.html">
The map component may be processed by the HTML viewer (a client side
image map) or by the HTTP server if the HTML viewer cannot process
maps.
A server image map is defined by adding the command ISMAP to the <IMG>
tag, for example:
<IMG SRC="map.gif" USEMAP="sample.html" ISMAP>
In this case, the HTML viewer will expect the map information to be
processed by the server.
A client side image map (CSIM), however, is a map processed by the
HTML viewer, which gets the map information from an HTML document
found by the hyperlink following the USEMAP= command, in this case it
follows later in the same document, and occurs between the <MAP> and
</MAP> tags:
<IMG SRC="map.gif" width=300 height=200 USEMAP="#sample">
<MAP NAME="sample">
<AREA SHAPE=RECT COORDS="60,80,120,100" HREF=map1.htm>
<AREA SHAPE=RECT COORDS="140,130,210,160" HREF=map2.htm>
<AREA SHAPE=RECT COORDS="80,20,220,50" HREF=map3.htm>
</MAP>
The first line tells the HTML viewer that this is a map, and assigns
it a unique name, in this case "sample". The next three lines define
three link areas within the image. Each area is defined with one the
forms:
<AREA SHAPE=RECT COORDS="top,left,bottom,right" HREF=URL>
or
<AREA SHAPE=CIRCLE COORDS="x,,y,radius" HREF=URL>
or
<AREA SHAPE=POLY COORDS="x,y,x2,y2,x3,y3....xn,yn" HREF=URL>
These co-ordinates are pixel co-ordinates within the image and define
a region within which the link occurs. The SHAPE=RECT command expects
a rectangular region described by two pairs of co-ordinates. The
SHAPE=CIRCLE command expects a circular region described by the co-
ordinates of the circle centre, followed by the radius. The final
example, SHAPE=POLY describes a multi-sided area.
Here is the complete HTML example with blank lines inserted to make it
easier to read and determine the individual areas:
<HTML>
<HEAD>
<TITLE>Example Image Map</TITLE>
</HEAD>
<BODY>
<H1 align=center>This Is An Image Map Example</H1>
<CENTER>
<IMG SRC="map.gif" width=300 height=200 USEMAP="#sample" ISMAP>
</CENTER>
<MAP NAME="sample">
<AREA SHAPE=RECT COORDS="60,80,120,100" HREF=map1.htm>
<AREA SHAPE=RECT COORDS="140,130,210,160" HREF=map2.htm>
<AREA SHAPE=RECT COORDS="80,20,220,50" HREF=map3.htm>
</MAP>
</BODY>
</HTML>
A NOHREF command, rather than an HREF= command, indicates that clicks
in the defined area should not lperform a hyperlink. An HREF tag
specifies where a click in that area should lead. Note that a
relative anchor specification will be expanded using the URL of the
map description as a base, rather than using the URL of the document
from which the map description is referenced (important if the map
definition is in a file separate to the main document). If a BASE tag
is present in the document containing the map description, that URL
will be used as the base.
Any number of AREA tags may be specified within a map. If two areas
intersect, the one which appears first in the map definition takes
precedence in the overlapping region, and it's hyperlink jump will
take place rather than the one specified in the later defined area. In
this way, a default hyperlink may be made by defining an area covering
the entire image, and placing this definition at the end of the map,
so that any overlapping areas will take precedence over the default
area.
Advanced Formatting
Multiple Spaces:
HTML viewers reduce all white space into a single space character. If
you want to add spaces between words, or padd a table column with
white space you can use the entity. For example:
Hello World
Will display as
Hello World
Tables:
The HTML table tags enable an HTML author to display information in a
tabular format. A table is a grid of cells, each cell may contain a
mixture of text and images and be a different size to the other cells
in the table.
A table is declared within the start-tag <TABLE> and end-tag </TABLE>.
You can specify a border and its width in pixels for the table by
adding a BORDER= command to the table start-tag, for example:
<TABLE BORDER=1>
Will give the displayed table a border 1 pixel wide. A wider border
can be forced with BORDER=10 for example:
<TABLE BORDER=10>
The spacing between the cells can also be determined in pixels with
the CELLSPACING= command. If you want a 10 pixel gutter between the
table cells add the command CELLSPACING=10 to the table start-tag:
<TABLE CELLSPACING=10>
The spacing between the cell walls and the enclosed data can also be
determined in pixels with the CELLPADDING= command. If you want a 10
pixel gutter between the table cell walls and the data in the cell add
the command CELLPADDING=10 to the table start-tag:
<TABLE CELLPADDING=10>
Finally the width of the table can be expressed in pixels, or as a
ratio of the document window width with the WIDTH= command;
<TABLE WIDTH=50%>
Putting this together we might want a table 200 pixels wide, with a
cell spacing of 5 pixels and a border of 4 pixels width. The following
table start-tag will achieve this:
<TABLE CELLSPACING=5 WIDTH=200 BORDER=4>
A caption can be included for the table with the caption tags
<CAPTION> and </CAPTION>. The text or image contained within the
caption tags will usually be displayed centred at the top of the
table, just above the top border line. You can force the caption to be
displayed below the table by adding the ALIGN=BOTTOM command to the
caption start-tag, for example:
<TABLE>
<CAPTION>This caption displays above the table</CAPTION>
</TABLE>
<TABLE>
<CAPTION ALIGN=BOTTOM>This caption displays below the
table</CAPTION>
</TABLE>
Table cells are defined in terms or rows and within the rows, columns
(either "table header" or "table data" cells). A table row is defined
within the tags <TR> and </TR>, for example:
<TABLE>
<TR>
.....
</TR>
</TABLE>
A table header column is defined within a row by the tags <TH> and
</TH>, for example;
<TABLE>
<TR>
<TH>
This is a table!
</TH>
</TR>
</TABLE>
Table header cells are, by default, displayed in BOLD and aligned in
the centre both horizontally and vertically.
A table data column is defined within a row by the tags <TD> and
</TD>, for example;
<TABLE>
<TR>
<TD>
This is a table!
</TD>
</TR>
</TABLE>
Table data cells are, by default, aligned left and vertically centred
within the cell.
Each table column may have individual alignment characteristics
defined by the ALIGN= and VALIGN= commands which override the default
settings. The ALIGN= command can be used to force the display to the
left or right of the cell, and the VALIGN= command to force the
display to the top or bottom of the cell for example:
<HTML>
<HEAD>
<TITLE>Table Example</TITLE>
</HEAD>
<TABLE CELLSPACING=10 BORDER=1 WIDTH=100%>
<CAPTION ALIGN=BOTTOM>Table Caption</CAPTION>
<TR>
<TD>
Cell One is aligned to the left and in the centre vertically
</TD>
<TD>
Cell Two
<P>has multiple lines
<P>in it
<P>and is displayed to the left of the cell
</TD>
</TR>
<TR>
<TD ALIGN=CENTER VALIGN=TOP>
Cell Three is centred horizontally,
<P>at the top of the cell
</TD>
<TD ALIGN=RIGHT>
Cell Four is another
<P>multiple line cell
<P>displayed to the right
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
You can stop the HTML viewer from word-wrapping the text within a cell
by adding the command NOWRAP to the cell definition, for example:
<TD NOWRAP>This text will be displayed as one long line</TD>
The size of the cell can be determined, to a degree, with the COLSPAN=
and ROWSPAN= commands. These tell the HTML viewer how many columns and
rows the cell is to span in relation to the rest of the table. For
example:
<HTML>
<HEAD>
<!-- Example of a simple table -->
<TITLE>Simple Table</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR><TH colspan=3>Protoplasm</TH></TR>
<TR><TH>Plants</TH><TH>Invertebrates</TH><TH>Vertebrates</TH></TR>
</TABLE>
</BODY>
</HTML>
Blank or empty cells can be defined to force cells within a row to the
right, for example:
<TD></TD>
Putting these concepts together, quite complex tables can be
constructed, for example:
<HTML>
<HEAD>
<!-- Example of a complex table -->
<TITLE>Evolution</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION>A Simplified Overview of Evolution</CAPTION>
<TR><TH colspan=28>Protoplasm</TH></TR>
<TR><TH colspan=27>Single-cell Plant
Animals</TH><TD>Bacteria</TD></TR>
<TR><TH colspan=5>Invertebrates</TH><TH colspan=3>Fungi</TH>
<TH colspan=18>Vertebrates</TH><TD>Sponges</TD></TR>
<TR><TH colspan=4>Ringed Worms</TH><TD>Jelly fish</TD>
<TH colspan=3>Mosses</TH><TH colspan=16>Sharks</TH>
<TD>Sea Squirts</TD><TD>Lancelets</TD></TR>
<TR><TD>Cone
shells</TD><TD>Spiders</TD><TD>Snails</TD><TD>Insects</TD>
<TD></TD><TD>Conifers</TD><TD>Ferns</TD><TD>Flowering Plants</TD>
<TH colspan=15>Amphibians</TH><TD>Bony Fishes</TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD><TD>
</TD><TD></TD><TH
colspan=13>Reptiles</TH><TD>Newts</TD><TD>Frogs</TD>
</TR><TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD>
<TD></TD><TD></TD><TH colspan=11>Mammals</TH><TD>Crocodiles</TD>
<TD>Lizards</TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD><TD>
</TD><TD></TD><TD></TD><TH colspan=2>Ungulates</TH>
<TH colspan=3>Carnivores</TH><TH colspan=3>Apes</TH><TD>Rodents</TD>
<TD>Marsupials</TD></TR><TR><TD></TD><TD></TD><TD></TD><TD></TD>
<TD></TD><TD></TD><TD></TD><TD></TD><TD></TD><TD>Cattle</TD>
<TD>Deer</TD><TD>Cats</TD><TD>Civets</TD><TD>Weasels</TD>
<TD>Monkeys</TD><TD>Gorillas</TD><TD>Man</TD></TR>
</TABLE>
</BODY>
</HTML>
Microsoft's Internet Explorer supports use of the BGCOLOR= command in
the <TABLE> tag. It allows the background colour of the table to be
specified using a standard rrggbb hex triplet. For example:
<TABLE BGCOLOR="FFFFFF">
Microsoft's Internet Explorer includes support for the BORDERCOLOR=
command which sets the border colour of the table. It takes as a
parameter a rrggbb hex triplet. It is necessary for the BORDER
attribute to be present in the main <TABLE> tag for border colouring
to work.
Microsoft's Internet Explorer allows use of the BORDERCOLORLIGHT=
command to set independently, the lighter colour to be displayed on a
3-dimensional <TABLE> border. It is the opposite of BORDERCOLORDARK.
It takes a colour parameter defined by a rrggbb hex triplet. It is
necessary for the BORDER attribute to be present in the main <TABLE>
tag for border colouring to work.
Microsoft's Internet Explorer allows use of the BORDERCOLORDARK=
command to set independently, the darker colour to be displayed on a 3-
dimensional <TABLE> border. It is the opposite of BORDERCOLORLIGHT.
It takes as a parameter a colour defined by a rrggbb hex triplet. It
is necessary for the BORDER attribute to be present in the main
<TABLE> element for border colouring to work.
NOTE : The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK
attributes can also be used in <TH>, <TR> and <TD>tags, with the
colour defined in the last element over-riding those defined before.
E.g. if a <TD> element contains a BORDERCOLOR attribute setting, the
setting specified will be used instead of any colour settings that may
have been specified in the <TR> element, which in turn over-rides any
colour settings in the <TABLE> element.
Some HTML viewers support the placing of background images images
inside the <TABLE>, <TH> and <TD> tags. If used in the <TABLE>
element, the image will be tiled behind all of the table cells. For
example:
<TABLE BACKGROUND="myimage.gif">
Fixing Column Widths:
The HTML viewer property of displaying images within table cells can
be exploited to create fixed column widths in a table, where the data
contained within the colmns varies in width. Normally, the HTML viewer
generates columns based upon the widest element in the table column,
creating uneven column widths. However, by forcing one cell in each
column to a desired width, as wide or wider than the widest cell, you
can create even column widths. One way to do this is to create a GIF
image, of a single colour 2 x 2 pixels in size and make it
transparent. Being so small this image will occupy a neglible amount
of disk space and load even remotely very fast. Then this image can be
used as an invisible element within a table cell to widen the cell as
desired. The following example does not work with Mosaic, which does
not support the image HEIGHT= and WIDTH= commands within a table cell,
but it does work with Internet Explorer:
<HTML>
<HEAD>
<!-- Example of a fixed width table -->
<TITLE>Table</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION><H1>Fixed Width Table Demonstration</H1></CAPTION>
<TR>
<TD><IMG SRC=spacer.gif height=1 width=300><BR>1.00</TD><TD><IMG
SRC=spacer.gif height=1 width=300><BR>8654.88</TD><TD><IMG
SRC=spacer.gif height=1 width=300><BR>7430456.78</TD>
<TR>
<TD>46.00</TD><TD>87134.93</TD><TD>4031565.42</TD>
<TR>
<TD>51.00</TD><TD>554.10</TD><TD>440436.67</TD>
<TR>
<TD>11.00</TD><TD>6414.43</TD><TD>472816.72</TD>
<TR>
<TD>83.00</TD><TD>9824.01</TD><TD>734436.63</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Setting Table Borders:
Internet Explorer supports the use of the FRAME= command which
requires the BORDER= command to be set and affects the display of the
table borders. It can accept any of the following parameters:
void this removes all the external borders
above this displays external borders at the top of the table
only
below this displays external borders at the bottom of the table
only
hsides this displays external borders at the horizontal sides of
the table. I.e. at the top and bottom of the table.
lhs this displays external borders at the left hand edges of the
table only
rhs this displays external borders at the right hand edges of
the table only.
vsides this displays external borders at both left and right hand
edges of the table
box this displays a box around the table (i.e. top, bottom, left
and right hand sides)
Internet Explorer supports the RULES= command. It requires the BORDER
value to be set and may only be used in tables where the <THEAD>,
<TBODY> and <TFOOT> tags have been declared. It affects the display
of the internal table borders ("rules"). It can accept the following
parameters:
none this removes all the internal rules
basic this displays horizontal borders between the <THEAD>,
<TBODY> and <TFOOT> sections
rows this displays horizontal borders between all rows
cols this displays horizontal borders between all columns
all this displays all the internal rules.
Internet Explorer provides the <COLGROUP> and </COLGROUP> tag pair
which can be used within a <TABLE> definition to group columns
together to set their alignment properties. It accepts the following
attributes:
ALIGN="center|justify|left|right"
This sets the text alignment within the column group. The default
value is "center"
VALIGN="baseline|bottom|middle|top"
This sets the vertical text alignment within the column group.
SPAN=
This can be used to set the number of columns upon which the ALIGN
and VALIGN attributes are to act.
An example of an Internet Explorer enhanced table:
<HTML>
<HEAD>
<!-- Example of an Internet Explorer Enhanced table -->
<TITLE>IE Table</TITLE>
</HEAD>
<BODY>
<TABLE BORDER FRAME=hsides RULES=cols>
<COL ALIGN=left>
<COLGROUP SPAN=3 ALIGN=center VALIGN=middle>
<THEAD>
<CAPTION ALIGN=center>This is the table caption</CAPTION>
<TR>
<TD>These</TD><TD>are</TD><TD>heading</TD><TD>cells</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>These</TD><TD>are</TD><TD>body</TD><TD>cells</TD>
</TR>
<TR>
<TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD>X</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
<TR>
<TD>X</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
<TR>
<TD>X</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
</TBODY>
<TFOOT></TFOOT>
</TABLE>
</BODY>
</HTML>
CONTROLLING DOCUMENT BACKGROUNDS
THE BACKGROUND ATTRIBUTE
Recent versions of the proposed HTML 3.0 spec. have added a BACKGROUND
attribute to the BODY tag. The purpose of this attribute is to specify
a URL pointing to an image that is to be used as a background for the
document. In Mosaic 2.1.1, Netscape and Internet Explorer, this
background image is used to tile the full background of the document-
viewing area. Thus specifying:
<BODY BACKGROUND="aluminum.gif">
Document here
</BODY>
would cause whatever text, images, etc. appeared in that document to
be placed on a tiled background image. If you prefer, a single large
image may be displayed which does not scroll when the document window
does by adding the command BGPROPERTIES=FIXED, for example:
<BODY BACKGROUND="aluminum.gif" BGPROPERTIES=FIXED>
Document here
</BODY>
THE BGCOLOR ATTRIBUTE
Although not standard HTML, it is possible to define the colour of the
background displayed by most modern HTML viewers, including Mosaic
2.1.1, Netscape Navigator and Microsoft Internet Explorer with the
BGCOLOR= command.
<BODY BGCOLOR="#rrggbb">
Document here
</BODY>
Where "#rrggbb" is a hexadecimal red-green-blue triplet used to
specify the background colour.
TEXT ATTRIBUTES
Like the BGCOLOR= command, the TEXT= command controls the attribute of
normal text displayed in a document.
<BODY TEXT="#rrggbb">
Document here
</BODY>
THE LINK, VLINK, AND ALINK ATTRIBUTE
These attributes let you control the colouring of link text. VLINK
stands for visited link, and ALINK stands for active link. The default
colouring of these is: LINK=blue, VLINK=purple, and ALINK=red. Again
the format for these attributes is the same as that for the BGCOLOR=
and TEXT= commands.
For example:
<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
Document here
</BODY>
Putting it all together, here is an example from Netscape which
illustrates a use of global colour attributes:
<HTML>
<HEAD>
<TITLE>Colour Control Example</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#F0F0F0" LINK="#FFFF00"
VLINK="#22AA22" ALINK="#0077FF">
This is an example document. Text is light-grey on black, and
<a href="nowhere.html">anchors</a> are yellow at first,
flashing blue-green when activated, and pale green if already
visited.
</BODY>
</HTML>
Notice that Mosaic and Internet explorer do not support the ALINK=
command, it doesn't do any harm, unrecognised commands are simply
ignored! This is just one of the many discrepancies between the
various HTML viewers.
Controlling individual text attributes:
Some new HTML viewers, notably Netscape Navigator and Microsoft
Internet Explorer support a new tag, <FONT>. The <FONT> tag enables
the HTML author to specify a font size , colour and typeface. The size
ranges from 1 to 7, smallest to largest. The colour takes a standard
rgb hexadecimal triplet to define the attribute of the text within the
<FONT> and </FONT> tags. For example:
<FONT SIZE=6 COLOR="FF0000" FACE="Arial">This is a Large Red Heading
in Arial Font</FONT>
The font size can also be determined relative to the base font size
using + and - in the FONT SIZE= command, for example:
<FONT SIZE=+1>This is the next size up from the standard text</FONT>
<FONT SIZE=-1>This is the next size down from the standard
text</FONT>
The base font size, colour and typeface can similarly be set with the
BASEFONT command, for example:
<BASEFONT SIZE=4 FACE="ARIAL" COLOR="FF0000">
Will set the base font size to slightly larger than the default, which
is size 3.
You can specify the name of different faces, for example:
<font face="arial, courier, geneva">
the HTML viewer will use "courier" if "arial" is not available on the
system, or "geneva" if
courier is not available either.
Preventing line breaks:
Both Netscape and Internet Explorer support the <NOBR> and </NOBR> tag
pair which prevent a long line from being broken. Instead the document
view window must be scrolled to the right by the user with the scroll-
bar to view the remainder of the text line. For example:
<NOBR>The Abecedarian were the followers of Nicholas Storck, a 16th
century German Anabaptist. They were so called because they rejected
all worldly knowledge including learning the alphabet.</NOBR>
Multi-Column Text:
Currently, multi-column text only seems to be supported by Netscape
Navigator. It is defined with the tag pair <MULTICOL COLS=n> and
</MULTICOL>, for example:
<MULTICOL COLS=4>
This is multiple column text displayed by Netscape Navigator
</MULTICOL>
Displays the text within the multicol tags in 4 columns.
The column widths and gutter between the columns can be defined by
adding the WIDTH= and GUTTER= commands to the <MULTICOL> tag.
Scrolling:
Microsoft's Internet Explorer supports scrolling lines of text, which
are declared by the <MARQUEE> tag. Only one line may be declared
within each <MARQUEE> tag, line breaks <BR> being ignored. For
example:
<MARQUEE>
This is a horizontal, animated, scrolling line of text!
</MARQUEE>
The <MARQUEE> tag also supports colour definition triplets for the
background colour of the scrolling text, for example:
<MARQUEE BGCOLOR="#FFFFFF">
This is a horizontal, animated, scrolling line of text!
</MARQUEE>
The behaviour of the scrolling text can be amended with the BEHAVIOUR=
command. This supports three parameters; SCROLL, SLIDE and ALTERNATE.
The default command is BEHAVIOUR=SCROLL, which displays the text
scrolling across the screen.
Adding the command BEHAVIOUR=ALTERNATE to the <MARQUEE> tag causes the
scrolling text to scroll to the right edge of the document window, and
then change direction, so that it scrolls left-to-right and then right-
to-left.
<MARQUEE BEHAVIOR=ALTERNATE>
The SLIDE parameter causes the text to scroll on at the right-hand
side of the document window and slide over to the left before
stopping, with the text displayed at the left margin of the document
window.
The direction of the travelling text can be changed from right-to-left
by the inclusion of the DIRECTION= command to the <MARQUEE> tag. For
example, this will scroll from left-to-right, instead of the default
right-to-left.
<MARQUEE DIRECTION=RIGHT>
Margins:
Microsoft's Internet Explorer supports the definition of a left and a
top margin with the commands LEFTMARGIN= and TOPMARGIN= which are
added to the <BODY> tag, for example:
<BODY LEFTMARGIN=10 TOPMARGIN=10>
The margin size is measured in pixels and applies to the entire
document.
Buttons:
Form buttons can be used as unusual, 3d links. For example, the
following code creates a 3d button with the inscription "Link", which
when pressed jumps to the URL
www.pins.co.uk/upages/probertm/index.html.
<FORM action="http://www.pins.co.uk/upages/probertm/index.html"
METHOD=POST>
<INPUT TYPE="submit" VALUE="Link">
</FORM>
Inline Video:
Microsoft's Internet Explorer allows the author to embed .AVI (Audio
Video Interleave) video clips in HTML documents. This is done with
the DYNSRC= command for the <IMG> tag. Using the <IMG> tag for this
purpose makes it possible to add video clips to pages, but also have
other browsers display still images in their place. For example;
<IMG DYNSRC="video.avi" SRC="TheEarth.gif" WIDTH=50 HEIGHT=50
LOOP=INFINITE ALIGN=RIGHT>
The DYNSRC= command specifies the address of a video clip to be
displayed in the window.
In the above example, Internet Explorer will play the movie file
"video.avi"; while other browsers will display the picture
"TheEarth.gif"
You can add a START= command to the tag to specify when the video file
should start playing. This attribute can be set to either FILEOPEN or
MOUSEOVER. The default setting is FILEOPEN which means that the video
will start playing as soon as the HTML document has finished loading.
The MOUSEOVER parameter defines that the video will start playing when
the user moves the mouse cursor over the animation. Both can be
specified together if necessary.
The CONTROLS command is a flag, which if specified causes a set of
controls to be displayed under the video clip window.
The LOOP= command specifies how many times a video clip will loop when
activated. If n=-1, or if LOOP=INFINITE is specified, the video will
loop indefinitely.
The LOOPDELAY= command specifies, in milliseconds, how long a video
clip will wait between play back loops.
Embedded Objects:
The <EMBED> tag allows you to put objects (video clips, sound or
whatever) directly into an HTML page. The syntax is:
<EMBED SRC="object_to_embed">
The <EMBED> element allows an HTML author to embed documents of any
type. The HTML viewer needs to have an application which can view the
data installed correctly on their machine, or have a "plug-in" (for
Netscape Navigator) that can manipulate the embedded file format.
The <EMBED> element can be used more or less the same as the <IMG>
element and so accepts typical image embedding commands such as WIDTH,
HEIGHT, BORDER, HSPACE, VSPACE.
For example, to embed a sound file:
<embed src="sound.wav">
Which are then downloaded to the HTML viewer, and played by a fitted
soundcard, if the user has one and the HTML viewer supports sound.
Frames
Frames divide Web pages into multiple, scrollable regions which enable
the HTML author to present information in a more flexible and useful
fashion. Each region, or frame, has several features:
1. It can be given an individual URL, so it can load information
independent of the other frames on the page;
2. It can be given a NAME, allowing it to be targeted by other URLs,
and;
3. It can resize dynamically if the user changes the window's size.
(Resizing can also be disabled, ensuring a constant frame size.)
A frame is declared with the start-tag <FRAMESET> and the end-tag
</FRAMESET> which replace the traditional <BODY> and </BODY> tags in a
standard HTML document. The FRAMESET start-tag defines how many frames
(regions) the viewer window will be divided into, and the sizes of
these regions. The region sizes are defined in terms of pixel rows and
columns. For example, to divide the document window into two equal
frames, one above the other you can use the command;
<FRAMESET ROWS=*,*>
The ROWS= command takes a comma separated list of pixel heights in
numbers, or in percentages or * to declare the pixel row height of
each frame. Replacing a number with an asterisk * tells the HTML
viewer to divide the available display area equally. The COLS= command
is similar, but applies to the horizontal width of each frame.
This example will split the display into two equal windows, and
display a different URL in each, 1.htm in one and 2.htm in the other:
<html>
<head>
<title>Frame Example</title>
</head>
<frameset rows=*,*>
<frame src=1.htm>
<frame src=2.htm>
</frameset>
</html>
This example does the same, but displays divides the display
vertically instead of horizontally;
<html>
<head>
<title>Frame Example</title>
</head>
<frameset cols=*,*>
<frame src=1.htm>
<frame src=2.htm>
</frameset>
</html>
Frames may be assigned names, by adding the NAME= command to the
<FRAME> tag, for example:
<FRAME SRC=1.HTM NAME=ONE>
By default, the HTML viewer will decide whether or not to add scroll
bars to the frame. If you want to suppress this, add the command
SCROLLING=NO to the <FRAME> tag, for example:
<FRAME SRC=1.HTM SCROLLING=NO>
A top and a left margin may be applied to each frame with the
MARGINHEIGHT= and MARGINWIDTH= commands within the <FRAME> tag. The
margin will force a blank area to the left and top of the resource
displayed within the frame. For example:
<FRAME SRC=1.HTM MARGINHEIGHT=10 MARGINWIDTH=10>
Hyperlinks within a frame, will by default load new resources into the
current frame. However, this can be amended so that the new document
is loaded into a different frame. If you have named your frames with
the NAME= command, then the target frame can be easily defined with:
<A HREF=new_doc.htm TARGET=named_frame>Link</A>
Where "named_frame" is the name of the frame you want "new_doc.htm" to
be loaded into. There are three predefined frame names: _top, _self
and _parent. _self refers to the current frame, and is the default
target for loading hyperlinked documents. _parent refers to the frame
which spawned the current frame, and _top refers to the entire display
window.
Here is a complete example comprised of a number of separate source
files. The name of each source file is in the title in brackets, e.g.
(test.htm):
<html>
<head>
<title>Frame Test (test.htm)</title>
</head>
<frameset rows=*,*>
<frame src=test1.htm name=test1>
<frame src=test2.htm name=test2>
</frameset>
</html>
<html>
<head>
<title>Frame Test (test1.htm)</title>
</head>
<body>
This is file TEST1.HTM
</body>
</html>
<html>
<head>
<title>Frame Test (test2.htm)</title>
</head>
<frameset cols=*,*>
<frame src=test_a.htm name=testa>
<frame src=test_b.htm name=testb>
</frameset>
</html>
<html>
<head>
<title>Frame Test (test_a.htm)</title>
</head>
<body>
This is file TEST_A.HTM
</body>
</html>
<html>
<head>
<title>Frame Test (test_b.htm)</title>
</head>
<body>
This is file TEST_B.HTM
<P>
<A href=test_c.htm target = test1>Load test_c.htm</A>
</body>
</html>
<html>
<head>
<title>Frame Test (test_c.htm)</title>
</head>
<body>
This is file TEST_C.HTM
</body>
</html>
Frames are a fairly recent innovation to the HTML language, and not
very many HTML viewers handle them. For those which don't there is the
tag pair <NOFRAMES> and </NOFRAMES> which declare a section of the
document to be displayed if the HTML viewer does not recognise frames.
This can be used to display a message or alternative form of the
document when viewed by HTML viewers which do not recognise frames,
for example:
<html>
<head>
<title>Frame Test</title>
</head>
<noframes>
This will only be displayed if the HTML viewer does not support
frames
</noframes>
<frameset rows=*,*>
<frame src=test1.htm name=test1>
<frame src=test2.htm name=test2>
</frameset>
</html>
Floating Frames:
Microsoft's Internet Explorer has introduced the floating frame,
specified with the tag pair <IFRAME> and </IFRAME>. These behave in a
manner a cross between an inline image and a frame. That is, documents
can be loaded into a floating frame just like any other frame, but
floating frames are displayed as though they were an inline image. For
example:
<IFRAME NAME="frame1" width="400" height="200"
SRC="welcome.htm"></IFRAME>
Any text specified between the tags will be displayed to HTML viewers
which do not support floating frames, instead of the frame. For
example:
<IFRAME NAME="frame1" width="400" height="200" SRC="welcome.htm">
Sorry! This site can only be viewed with Internet Explorer
</IFRAME>
Forms
A form is a template for a form data set and an associated method and
action URI used on the WWW. Forms have no relevance to local HTML
publishing. A form data set is a sequence of name/value pair fields.
The names are specified on the NAME attributes of form input elements,
and the values are given initial values by various forms of markup and
edited by the user. The resulting form data set is used to access an
information service as a function of the action and method.
Forms elements can be mixed in with document structuring elements. For
example, a PRE element may contain a FORM element, or a FORM element
may contain lists which contain INPUT elements. This gives
considerable flexibility in designing the layout of forms.
Form Elements
<FORM>
The <FORM> element contains a sequence of input elements, along with
document structuring elements. The attributes are:
ACTION=
specifies the action URI for the form. The action URI of a form
defaults to the base URI of the document.
METHOD=
selects a method of accessing the action URI. The set of applicable
methods is a function of the scheme of the action URI of the form. See
section Query Forms: METHOD=GET and section Forms with Side-Effects:
METHOD=POST.
ENCTYPE =
specifies the media type used to encode the name/value pairs for
transport, in case the protocol does not itself impose a format.
<INPUT>
The <INPUT> element represents a field for user input. The TYPE=
attribute discriminates between several variations of fields.
The <INPUT> element has a number of attributes. The set of applicable
attributes depends on the value of the TYPE= attribute.
The default vaule of the TYPE attribute is `TEXT', indicating a single
line text entry field. (Use the TEXTAREA element for multi-line text
fields.)
Required attributes are:
NAME, the name for the form field corresponding to this element.
The optional attributes are MAXLENGTH which constrains the number of
characters that can be entered into a text input field. If the value
of MAXLENGTH is greater the the value of the SIZE attribute, the field
should scroll appropriately. The default number of characters is
unlimited.
SIZE specifies the amount of display space allocated to this input
field according to its type. The default depends on the user agent.
VALUE defines the initial value of the field. For example:
<p>
Street Address:
<input name=street><br>
Town:
<input name=city size=20 maxlength=20><br>
Post Code:
<input name=post size=10 maxlength=10><br>
An INPUT element with `TYPE=PASSWORD' is a text field as above, except
that the value is obscured as it is entered. For example:
<p>Name:
<input name=login>
Password:
<input type=password name=passwd>
An INPUT element with `TYPE=CHECKBOX' represents a boolean choice. A
set of such elements with the same name represents an n-of-many choice
field. Required attributes are:
NAME a symbolic name for the form field corresponding to this element
or group of elements.
VALUE the portion of the value of the field contributed by this
element.
Optional attributes are:
CHECKED indicates that the initial state is on.
For example:
<p>
What flavours do you like?
<input type=checkbox name=flavour value=vanilla>
Vanilla<br>
<input type=checkbox name=flavour value=strawberry>
Strawberry<br>
<input type=checkbox name=flavour value=chocolate checked>
Chocolate<br>
An INPUT element with `TYPE=RADIO' represents a boolean choice. A set
of such elements with the same name represents a 1-of-many choice
field. The NAME and VALUE attributes are required as for check boxes.
Optional attributes are:
CHECKED indicates that the initial state is on.
At all times, exactly one of the radio buttons in a set is checked. If
none of the INPUT elements of a set of radio buttons specifies
`CHECKED', then the user agent must check the first radio button of
the set initially. For example:
<p>
Which is your favourite?
<input type=radio name=flavour value=vanilla>
Vanilla<br>
<input type=radio name=flavour value=strawberry>
Strawberry<br>
<input type=radio name=flavour value=chocolate>
Chocolate<br>
An INPUT element with `TYPE=IMAGE' specifies an image resource to
display, and allows input of two form fields: the x and y coordinate
of a pixel chosen from the image. The names of the fields are the name
of the field with `.x' and `.y' appended. `TYPE=IMAGE' implies
`TYPE=SUBMIT' processing; that is, when a pixel is chosen, the form as
a whole is submitted.
The NAME attribute is required as for other input fields. The SRC
attribute is required and the ALIGN is optional as for the IMG
element. For example:
<p>
Choose a point on the map:
<input type=image name=point src="map.gif">
An INPUT element with `TYPE=HIDDEN' represents a hidden field.The user
does not interact with this field; instead, the VALUE attribute
specifies the value of the field. The NAME and VALUE attributes are
required. For example:
<input type=hidden name=context value="l2k3j4l2k3j4l2k3j4lk23">
An INPUT element with `TYPE=SUBMIT' represents an input option,
typically a button, that instructs the user agent to submit the form.
Optional attributes are:
NAME indicates that this element contributes a form field whose value
is given by the VALUE attribute. If the NAME attribute is not present,
this element does not contribute a form field.
VALUE indicates a label for the input button. For example:
You may submit this request internally:
<input type=submit name=recipient value=internal><br>
or to the external world:
<input type=submit name=recipient value=world>
An INPUT element with `TYPE=RESET' represents an input option,
typically a button, that instructs the user agent to reset the form's
fields to their initial states. The VALUE attribute, if present,
indicates a label for the input button. For example:
When you are finished, you may submit this request:
<input type=submit><br>
You may clear the form and start over at any time:
<input type=reset>
The SELECT element constrains the form field to an enumerated list of
values. The values are given in OPTION elements. Attributes are:
MULTIPLE indicates that more than one option may be included in the
value.
NAME specifies the name of the form field.
SIZE specifies the number of visible items. Select fields of size one
are typically pop-down menus, whereas select fields with size greater
than one are typically lists. For example:
<SELECT NAME="flavor">
<OPTION>Vanilla
<OPTION>Strawberry
<OPTION value="RumRasin">Rum and Raisin
<OPTION selected>Peach and Orange
</SELECT>
The initial state has the first option selected, unless a SELECTED
attribute is present on any of the OPTION elements.
The Option element can only occur within a Select element. It
represents one choice, and has the following attributes:
SELECTED Indicates that this option is initially selected.
VALUE indicates the value to be returned if this option is chosen. The
field value defaults to the content of the OPTION element.
The content of the OPTION element is presented to the user to
represent the option. It is used as a returned value if the VALUE
attribute is not present.
The TEXTAREA element represents a multi-line text field. Attributes
are:
COLS the number of visible columns to display for the text area, in
characters.
NAME specifies the name of the form field.
ROWS the number of visible rows to display for the text area, in
characters.
For example:
<TEXTAREA NAME="address" ROWS=6 COLS=64>
HaL Computer Systems
1315 Dell Avenue
Campbell, California 95008
</TEXTAREA>
The content of the TEXTAREA element is the field's initial value.
Typically, the ROWS and COLS attributes determine the visible
dimension of the field in characters. The field is typically rendered
in a fixed-width font. HTML user agents should allow text to extend
beyond these limits by scrolling as needed.
Form Submission
An HTML user agent begins processing a form by presenting the document
with the fields in their initial state. The user is allowed to modify
the fields, constrained by the field type etc. When the user indicates
that the form should be submitted (using a submit button or image
input), the form data set is processed according to its method, action
URI and enctype.
When there is only one single-line text input field in a form, the
user agent should accept Enter in that field as a request to submit
the form.
The form-urlencoded Media Type
The default encoding for all forms is `application/x-www-form-
urlencoded'. A form data set is represented in this media type as
follows:
1.The form field names and values are escaped: space characters are
replaced by `+', and then reserved characters are escaped as per URL;
that is, non-alphanumeric characters are replaced by `%HH', a percent
sign and two hexadecimal digits representing the ASCII code of the
character. Line breaks, as in multi-line text field values, are
represented as CR LF pairs, i.e. `%0D%0A'.
2.The fields are listed in the order they appear in the document with
the name separated from the value by `=' and the pairs separated from
each other by `&'. Fields with null values may be omitted. In
particular, unselected radio buttons and checkboxes should not appear
in the encoded data, but hidden fields with VALUE attributes present
should.
Query Forms: METHOD=GET
If the processing of a form is idempotent (i.e. it has no lasting
observable effect on the state of the world), then the form method
should be `GET'. Many database searches have no visible side-effects
and make ideal applications of query forms.
To process a form whose action URL is an HTTP URL and whose method is
`GET', the user agent starts with the action URI and appends a `?' and
the form data set, in `application/x-www-form-urlencoded' format as
above. The user agent then traverses the link to this URI just as if
it were an anchor (see section Activation of Hyperlinks).
Forms with Side-Effects: METHOD=POST
If the service associated with the processing of a form has side
effects (for example, modification of a database or subscription to a
service), the method should be `POST'.
To process a form whose action URL is an HTTP URL and whose method is
`POST', the user agent conducts an HTTP POST transaction using the
action URI, and a message body of type `application/x-www-form-
urlencoded' format as above. The user agent should display the
response from the HTTP POST interaction just as it would display the
response from an HTTP GET above.
Example Form Submission: Questionnaire Form
Consider the following document:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<title>Sample of HTML Form Submission</title>
<H1>Sample Questionnaire</H1>
<P>
Please fill out this questionnaire:
<FORM METHOD="POST" ACTION="http://www.w3.org/sample">
<P>
Your name: <INPUT NAME="name" size="48">
<P>
Male <INPUT NAME="gender" TYPE=RADIO VALUE="male">
<P>
Female <INPUT NAME="gender" TYPE=RADIO VALUE="female">
<P>
Number in family: <INPUT NAME="family" TYPE=text>
<P>
Cities in which you maintain a residence:
<UL>
<LI>Kent <INPUT NAME="city" TYPE=checkbox VALUE="kent">
<LI>Miami <INPUT NAME="city" TYPE=checkbox VALUE="miami">
<LI>Other <TEXTAREA NAME="other" cols=48 rows=4></textarea>
</UL>
Nickname: <INPUT NAME="nickname" SIZE="42">
<P>
Thank you for responding to this questionnaire.
<P>
<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</FORM>
The initial state of the form data set is:
name
""
gender
"male"
family
""
other
""
nickname
""
Note that the radio input has an initial value, while the checkbox has
none.
The user might edit the fields and request that the form be submitted.
At that point, suppose the values are:
name
"John Doe"
gender
"male"
family
"5"
city
"kent"
city
"miami"
other
"abc\ndef"
nickname
"J&D"
The user agent then conducts an HTTP POST transaction using the URI
`http://www.w3.org/sample'. The message body would be:
name=John+Doe&gender=male&family=5&city=kent&city=miami&other=abc%0D
%0Adef&nickname=J%26D
Interpretation of the message submitted is done by the URI. This
requires you to have access to your WWW server and knowledge of CGI.
META
Meta tags are a new, and as yet non-formalised aspect of HTML used by
the WWW. The following information from the Internet Engineering Task
Force was distributed in January 1996, and should only be viewed as
work in progress.
Abstract
This document defines a strict synopsis for the META Tag of HTML.
The grammar is extended to the contents of the HTTP-EQUIV field,
defining a set of words to use to allow document cataloguing.
1. Introduction
Now the synopsis of the META HTTP-EQUIV Tag is not severe, allowing so
the use of different key words to define the same things.
The functions like this:
<META HTTP-EQUIV = "author" CONTENT = "Pennac, Rossi">
or:
<META HTTP-EQUIV = "writer" CONTENT = "Pennac, Rossi">
could reppresent the same concepts with two different syntax.
The aim of this Draft is to define which are the words to use to
define the contents of an HTML document.
There are, also, some easy rules to implement a binary logic (AND or
OR) for the CONTENT field.
2. The META Tag
The META element is used within the HEAD element to embed documents
meta-information not defined by other HTML elements. Such information
can be extracted by servers/clients for use in identifying, indexing
and cataloging specialized document meta-information.
Although it is generally preferable to used named elements that have
well defined semantics for each type of meta-information, such as
title, this element is provided for situations where strict SGML
parsing is necessary and the local DTD is not extensible.
In addition, HTTP servers can read the contents of the document head
to generate response headers corresponding to any elements defining a
value for the attribute HTTP-EQUIV. This provides document authors
with a mechanism (not necessarily the preferred one) for identifying
information that should be included in the response headers of an HTTP
request.
The META element has three attributes:
- HTTP-EQUIV
- NAME
- CONTENT
The HTTP-EQUIV and the NAME attributes are mutually exclusives.
3. HTTP-EQUIV.
This attribute binds the element to an HTTP response header. If the
semantics of the HTTP response header named by this attribute is
known, then the contents can be processed based on a well defined
syntactic mapping, whether or not the DTD includes anything about it.
HTTP header names are case insensitive. If absent, the NAME attribute
should be used to identify the meta-information and it should not be
used within an HTTP response header.
It is possible to use any text string, but if you want to define these
properties you have to use the following words:
keywords: to indicate the keywords of the document
author: to indicate the author of the document
timestamp: to indicate when the document is authored
(HTTP-date format)
expire: to indicate the expire date of the document
(HTTP-date format)
language: to indicate the language of the document
(using ISO3316 code or ISO639 code)
abstract: to indicate the abstract of the document
organization: to indicate the organization of the author
revision: to indicate the revision number of the document
(format: 00, 01, 02, or 000, 001, ...)
An HTTP server must process these tags for an HEAD HTTP requester.
Do not name an HTTP-EQUIV attribute the same as a response header that
should typically only be generated by the HTTP server. Some
inappropriate names are "Server", "Date", and "Last-Modified".
Whether a name is inappropriate depends on the particular server
implementation. It is recommended that servers ignore any META
elements that specify HTTP equivalents (case insensitively) to their
own reserved response headers.
4. NAME.
This attributes can be used to define some properties such as "number
of pages" or "preferred browser" or any info an author want to insert
in his document. The keywords indicates in the previous paragraph for
the HTTP-EQUIV are still valid also in the NAME context.
An example:
<META NAME= "Maybe Published By" CONTENT = "McDraw Bill">
or
<META NAME= "keywords" CONTENT = "manual, scouting">
Do not use the META element to define information that should be
associated with an existing HTML element.
5. CONTENT
Used to supply a value for a named property.
It can contain more than one single information; it is possible to use
the Boolean operator (AND, OR) to insert a Boolean definition of the
field.
The AND operator will be represented by the SPACE (ASCII[32]) and the
OR operator by the COMMA (ASCII[44]).
The AND operator is processed before the OR operator. So a string like
this: "Red ball, White pen" means :"(Red AND ball) OR (White AND
pen)".
Example:
<META HTTP-EQUIV= "Keywords" CONTENT= "Italy Products, Italy
Tourism">
The spaces between a comma and a word or vice versa are ignored.
6. Cataloguing an HTML document
These 'keywords' were specifically conceived to catalogue HTML
documents. This allows the software agents to index at best your own
document.
To do a preliminary indexing, it's important to use at least the HTTP-
EQUIV meta-tag "keywords".
Appendix
HTML Quick Reference
BASIC ELEMENTS
Document Type <HTML></HTML> (beginning and end
of file)
Header <HEAD></HEAD> (descriptive
information, such
as title)
Title <TITLE></TITLE> (must be in header)
Body <BODY></BODY> (main document
display)
STRUCTURAL
DEFINITION
Heading <H?></H?> (6 levels)
Align Heading <H? ALIGN=
LEFT|CENTER|RIGHT>
</H?>
Division <DIV></DIV>
Align Division <DIV
ALIGN=LEFT|RIGHT|CE
NTER></DIV>
Block Quote <BLOCKQUOTE> (usually displayed
</BLOCKQUOTE> as indented)
Emphasis <EM></EM> (usually displayed
as italic)
Strong Emphasis <STRONG></STRONG> (usually displayed
as bold)
Citation <CITE></CITE> (usually italics)
Code <CODE></CODE> (for source code
listings)
Sample Output <SAMP></SAMP>
Keyboard Input <KBD></KBD>
Variable <VAR></VAR>
Author's <ADDRESS></ADDRESS>
Address
Large Font Size <BIG></BIG>
Small Font Size <SMALL></SMALL>
PRESENTATION
FORMATTING
Bold <B></B>
Italic <I></I>
Underline <U></U>
Strikeout <STRIKE></STRIKE>
Strikeout <S></S>
Subscript <SUB></SUB>
Superscript <SUP></SUP>
Typewriter <TT></TT> (displays in a
monospaced font)
Preformatted <PRE></PRE> (display text
spacing as-is)
Width <PRE WIDTH=?></PRE> (in characters)
Center <CENTER></CENTER> (for both text and
images)
Blinking <BLINK></BLINK>
Font Size <FONT (ranges from 1-7)
SIZE=?></FONT>
Change Font <FONT SIZE="+|-Size?">
</FONT>
Base Font Size <BASEFONT SIZE=?> (from 1-7; default
is 3)
Font Colour <FONT
COLOR="#$$$$$$">
</FONT>
Select Font <FONT
FACE="***"></FONT>
Multi-Column <MULTICOL COLS=?>
Text </MULTICOL>
Column Gutter <MULTICOL (default is 10
GUTTER=?></MULTICOL pixels)
>
Column Width <MULTICOL WIDTH=?>
</MULTICOL>
Spacer <SPACER>
Spacer Type <SPACER
TYPE=horizontal|
vertical|block>
Spacer Size <SPACER SIZE=?>
Spacer <SPACER WIDTH=?
Dimensions HEIGHT=?>
Spacer <SPACER
Alignment ALIGN=left|right|center>
Margins <BODY LEFTMARGIN=?
TOPMARGIN=?>
LINKS AND
GRAPHICS
Base URL <BASE HREF="URL"> (must be specified
</A> in the header, if
at all.)
Link Something <A HREF="URL"></A>
Link to Target <A (if in another
HREF="URL#***"></A> document)
<A HREF="#***"></A> (if in current
document)
Target Window <A HREF="URL"
TARGET="***|
|_blank|_self|
_parent|_top"></A>
Define Target <A NAME="***"></A>
in Document
Send mail <A
HREF="mailto:recipient"> </A>
Link to ftp <A HREF =
server "ftp://server"></A>
Download a file <A HREF =
"ftp://server//file"> </A>
Link to news <A HREF =
server "news://server>
Display Image <IMG SRC="URL">
Alignment <IMG SRC="URL"
ALIGN=TOP|BOTTOM|MI
DDLE|LEFT|RIGHT>
Alignment <IMG SRC="URL"
ALIGN=TEXTTOP|BSMID
DLE|BASELINE|ABSBOTTOM>
Alternate <IMG SRC="URL" (if image not
ALT="***"> displayed)
Margin around <IMG SRC="URL" (blank space in
image HSPACE=? VSPACE=?> pixels between
image and text)
Imagemap <IMG SRC="URL" (requires a script)
ISMAP>
Client-Side <IMG SRC="URL"
Imagemap USEMAP="URL">
Map Description <MAP
NAME="***"></MAP>
Map Sections <AREA
SHAPE="RECT|CIRCLE|
POLY" COORDS=",,,"
HREF="URL"|NOHREF>
Dimensions <IMG SRC="URL"
WIDTH=? HEIGHT=?>
(in pixels)
Border <IMG SRC="URL" (in pixels)
BORDER=?>
Runaround Space <IMG SRC="URL" (in pixels)
HSPACE=? VSPACE=?>
Embed Object <EMBED SRC="URL"> (insert object into
page)
Object Size <EMBED SRC="URL"
WIDTH=? HEIGHT=?>
DIVIDERS
Paragraph <P></P> (closing tag often
unnecessary)
Align Text <P ALIGN=
LEFT|CENTER|RIGHT>
</P>
Line Break <BR> (a single carriage
return)
Clear Textwrap <BR
CLEAR=LEFT|RIGHT|ALL>
Horizontal Rule <HR>
Alignment <HR
ALIGN=LEFT|RIGHT|CE
NTER>
Thickness <HR SIZE=?> (in pixels)
Width <HR WIDTH=?> (in pixels)
Width Percent <HR WIDTH="%"> (as a percentage of
page width)
Solid Line <HR NOSHADE> (without the 3D
cutout look)
No Break <NOBR></NOBR> (prevents line
breaks)
Word Break <WBR> (where to break a
line if needed)
LISTS
Unordered List <UL><LI></UL> (<LI> before each
list item)
Compact <UL COMPACT></UL>
Bullet Type <UL TYPE= (for the whole
DISC|CIRCLE|SQUARE> list)
<LI TYPE= (this &subsequent)
DISC|CIRCLE|SQUARE>
Ordered List <OL><LI></OL> (<LI> before each
list item)
Compact <OL COMPACT></OL>
Numbering Type <OL TYPE=A|a|I|i|1> (for the whole
list)
<LI TYPE=A|a|I|i|1> (this &subsequent)
Starting Number <OL START=?> (for the whole
list)
<LI VALUE=?> (this &subsequent)
Definition List <DL><DT><DD></DL> (<DT>=term,
<DD>=definition)
Compact <DL COMPACT></DL>
Menu List <MENU><LI></MENU> (<LI> before each
list item)
Compact <MENU
COMPACT></MENU>
Directory List <DIR><LI></DIR> (<LI> before each
list item)
Compact <DIR COMPACT></DIR>
BACKGROUNDS AND
COLOURS
Tiled <BODY
backkground BACKGROUND="URL">
Static <BODY
background BACKGROUND="URL"
BGPROPERTIES=FIXED>
Bkground Colour <BODY (order is
BGCOLOR="#$$$$$$"> red/green/blue)
Text Colour <BODY
TEXT="#$$$$$$">
Link Colour <BODY
LINK="#$$$$$$">
Visited Link <BODY
Colour VLINK="#$$$$$$">
Active Link <BODY
Colour ALINK="#$$$$$$">
FORMS
Define Form <FORM ACTION="URL"
METHOD=GET|POST>
</FORM>
File Upload <FORM
ENCTYPE="multipart/
form-data"> </FORM>
Input Field <INPUT
TYPE="TEXT|PASSWORD
|CHECKBOX|RADIO|
IMAGE|HIDDEN|SUBMIT
|RESET">
Field Name <INPUT NAME="***">
Field Value <INPUT VALUE="***">
Checked? <INPUT CHECKED> (checkboxes and
radio boxes)
Field Size <INPUT SIZE=?> (in characters)
Max Length <INPUT MAXLENGTH=?> (in characters)
Selection List <SELECT></SELECT>
Name of List <SELECT
NAME="***"></SELECT
>
# of Options <SELECT
SIZE=?></SELECT>
Multiple Choice <SELECT MULTIPLE> (can select more
than one)
Option <OPTION> (items that can be
selected)
Default Option <OPTION SELECTED>
Input Box Size <TEXTAREA ROWS=?
COLS=?></TEXTAREA>
Name of Box <TEXTAREA
NAME="***"></TEXTAREA>
Wrap Text <TEXTAREA
WRAP=OFF|VIRTUAL|PHYSICAL>
</TEXTAREA>
TABLES
Define Table <TABLE></TABLE>
Table Border <TABLE
BORDER=?></TABLE>
Cell Spacing <TABLE (space between
CELLSPACING=?> table cells)
Cell Padding <TABLE (space between cell
CELLPADDING=?> wall and enclosed
data)
Desired Width <TABLE WIDTH=?> (in pixels)
Width Percent <TABLE WIDTH="%"> (percentage of
page)
Table Row <TR></TR>
Alignment <TR
ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
Table Cell <TD></TD> (must appear within
table rows)
Alignment <TD
ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
No linebreaks <TD NOWRAP>
Columns to Span <TD COLSPAN=?>
Rows to Span <TD ROWSPAN=?>
Desired Width <TD WIDTH=?> (in pixels)
Width Percent <TD WIDTH="%"> (percentage of
table)
Cell Colour <TD
BGCOLOR="#$$$$$$">
Table Header <TH></TH> (same as data,
except bold and
centered)
Alignment <TH
ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
No Linebreaks <TH NOWRAP>
Columns to Span <TH COLSPAN=?>
Rows to Span <TH ROWSPAN=?>
Desired Width <TH WIDTH=?> (in pixels)
Width Percent <TH WIDTH="%"> (percentage of
table)
Cell Colour <TH
BGCOLOR="#$$$$$$">
Table Caption <CAPTION></CAPTION>
Alignment <CAPTION (above/below table)
ALIGN=TOP|BOTTOM>
FRAMES
Frame Document <FRAMESET> (instead of <BODY>)
</FRAMESET>
Row Heights <FRAMESET (pixels or %)
ROWS=,,,></FRAMESET>
Row Heights <FRAMESET ROWS=*> (* = relative size)
</FRAMESET>
Column Widths <FRAMESET (pixels or %)
COLS=,,,>
</FRAMESET>
Column Widths <FRAMESET (* = relative size)
COLS=*></FRAMESET>
Border Width <FRAMESET BORDER=?>
Borders <FRAMESET
FRAMEBORDER="yes|no">
Border Colour <FRAMESET
BORDERCOLOR="#$$$$$$">
Define Frame <FRAME> (contents of an
individual frame)
Display <FRAME SRC="URL">
Document
Frame Name <FRAME NAME="***">
Margin Width <FRAME (left and right
MARGINWIDTH=?> margins)
Margin Height <FRAME (top and bottom
MARGINHEIGHT=?> margins)
Scrollbar? <FRAME
SCROLLING="YES|NO|AUTO">
Not Resizable <FRAME NORESIZE>
Borders <FRAME
FRAMEBORDER="yes|no">
Border Colour <FRAME
BORDERCOLOR="#$$$$$$">
Unframed <NOFRAMES></NOFRAMES>(for non-frames
Content browsers)
MISCELLANEOUS
Comment <!-- *** --> (not displayed by
the browser)
HTML 3.2 <!DOCTYPE HTML
Prologue PUBLIC "-//W3C//DTD
HTML 3.2//EN">
Searchable <ISINDEX> (indicates a
searchable index)
Prompt <ISINDEX (text to prompt
PROMPT="***"> input)
Send Search <A (use a real
HREF="URL?***"></a> question mark)
URL of This <BASE HREF="URL"> (must be in header)
File
Base Window <BASE TARGET="***"> (must be in header)
Name
Meta <META> (must be in header)
Information
Automatic <META HTTP- (replace ? with
Navigation EQUIV="REFRESH" number of seconds
CONTENT="?; to wait, and URL
URL=URL"> with target URL.
The browser then
automatically
navigates to URL)
Provide <META (supply keywords
Keywords To WWW NAME="keywords" separated by a
Agents CONTENT="***"> comma)
Provide Author <META NAME="AUTHOR" (replace *** with
Name to WWW CONTENT="***"> your name)
Agents
Provide WWW <META NAME (replace *** with a
site ="DESCRIPTION" description of the
description to CONTENT="***"> site)
WWW Agents
Marquee <MARQUEE (only one line per
scrolling right BGCOLOR="#$$$$$$"> Marquee tag-pair)
to left </MARQUEE>
continuously
Marquee <MARQUEE
scrolling left BGCOLOR="#$$$$$$">
to right DIRECTION=RIGHT
continuously </MARQUEE>
Marquee <MARQUEE
scrolling text BGCOLOR="#$$$$$$">
on from right BEHAVIOUR=SLIDE
to left </MARQUEE>
Marquee <MARQUEE
scrolling right BGCOLOR="#$$$$$$">
to left and BEHAVIOUR=ALTERNATE
then back left </MARQUEE>
to right
continuously
Sound <BGSOUND (played in the
SRC="filename"> background)
Play <BGSOUND
continuously SRC="filename"
loop=infinite>
Entity Reference Table
The following characters can not be displayed by most HTML viewers,
and must be included in a document using an entity reference or
numeric coding instead. Please be aware that unlike HTML tags,
entities are case sensitive.
ENTITY NUMERIC
CHARACTER REFERENCE CHAR REF CHARACTER DESCRIPTION
" " " Quotation mark
& & & Ampersand
< < < Less than
> > > Greater than
SPACE Non-breaking Space
For example, to add a less-than sign to a document for display, use
<
Colour Codes
The following table lists the names of various colours, and
illustrates the rgb triplet required to select that colour in Netscape
Navigator and Internet Explorer.
Colour Name Triplet
White #FFFFFF
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
Black #000000
Aquamarine #70DB93
Baker's Chocolate #5C3317
Blue Violet #9F5F9F
Brass #B5A642
Bright Gold #D9D919
Brown #A62A2A
Bronze #8C7853
Bronze II #A67D3D
Cadet Blue #5F9F9F
Cool Copper #D98719
Copper #B87333
Coral #FF7F00
Corn Flower Blue #42426F
Dark Brown #5C4033
Dark Green #2F4F2F
Dark Green Copper #4A766E
Dark Olive Green #4F4F2F
Dark Orchid #9932CD
Dark Purple #871F78
Dark Slate Blue #6B238E
Dark Slate Grey #2F4F4F
Dark Tan #97694F
Dark Turquoise #7093DB
Dark Wood #855E42
Dim Grey #545454
Dusty Rose #856363
Feldspar #D19275
Firebrick #8E2323
Forest Green #238E23
Gold #CD7F32
Goldenrod #DBDB70
Grey #C0C0C0
Green Copper #527F76
Green Yellow #93DB70
Hunter Green #215E21
Indian Red #4E2F2F
Khaki #9F9F5F
Light Blue #C0D9D9
Light Grey #A8A8A8
Light Steel Blue #8F8FBD
Light Wood #E9C2A6
Lime Green #32CD32
Mandarian Orange #E47833
Maroon #8E236B
Medium Aquamarine #32CD99
Medium Blue #3232CD
Medium Forest Green #6B8E23
Medium Goldenrod #EAEAAE
Medium Orchid #9370DB
Medium Sea Green #426F42
Medium Slate Blue #7F00FF
Medium Spring Green #7FFF00
Medium Turquoise #70DBDB
Medium Violet Red #DB7093
Medium Wood #A68064
Midnight Blue #2F2F4F
Navy Blue #23238E
Neon Blue #4D4DFF
Neon Pink #FF6EC7
New Midnight Blue #00009C
New Tan #EBC79E
Old Gold #CFB53B
Orange #FF7F00
Orange Red #FF2400
Orchid #DB70DB
Pale Green #8FBC8F
Pink #BC8F8F
Plum #EAADEA
Quartz #D9D9F3
Rich Blue #5959AB
Salmon #6F4242
Scarlet #8C1717
Sea Green #238E68
Semi-Sweet Chocolate #6B4226
Sienna #8E6B23
Silver #E6E8FA
Sky Blue #3299CC
Slate Blue #007FFF
Spicy Pink #FF1CAE
Spring Green #00FF7F
Steel Blue #236B8E
Summer Sky #38B0DE
Tan #DB9370
Thistle #D8BFD8
Turquoise #ADEAEA
Very Dark Brown #5C4033
Very Light Grey #CDCDCD
Violet #4F2F4F
Violet Red #CC3299
Wheat #D8D8BF
Yellow Green #99CC32
Glossary
absolute URI
a URI in absolute form; for example, as per URL
anchor
one of two ends of a hyperlink; typically, a phrase marked as an A
element.
base URI
an absolute URI used in combination with a relative URI to determine
another absolute URI.
character
An atom of information, for example a letter or a digit. Graphic
characters have associated glyphs, whereas control characters have
associated processing semantics.
character encoding scheme
A function whose domain is the set of sequences of octets, and whose
range is the set of sequences of characters from a character
repertoire; that is, a sequence of octets and a character encoding
scheme determines a sequence of characters.
character repertoire
A finite set of characters; e.g. the range of a coded character set.
code position
An integer. A coded character set and a code position from its domain
determine a character.
coded character set
A function whose domain is a subset of the integers and whose range is
a character repertoire. That is, for some set of integers (usually of
the form {0, 1, 2, ..., N} ), a coded character set and an integer in
that set determine a character. Conversely, a character and a coded
character set determine the character's code position (or, in rare
cases, a few code positions).
data character
Characters other than markup, which make up the content of elements.
document character set
a coded character set whose range includes all characters used in a
document. Every SGML document has exactly one document character set.
Numeric character references are resolved via the document character
set.
DTD
document type definition. Rules that apply SGML to the markup of
documents of a particular type, including a set of element and entity
declarations.
element
A component of the hierarchical structure defined by a document type
definition; it is identified in a document instance by descriptive
markup, usually a start-tag and end-tag.
end-tag
Descriptive markup that identifies the end of an element.
entity
data with an associated notation or interpretation; for example, a
sequence of octets associated with an Internet Media Type.
fragment identifier
the portion of an HREF attribute value following the `#' character
which modifies the presentation of the destination of a hyperlink to a
position within the specified document.
form data set
a sequence of name/value pairs; the names are given by an HTML
document and the values are given by a user.
hyperlink
a relationship between two anchors, called the head and the tail. The
link goes from the tail to the head. The head and tail are also known
as destination and source, respectively.
markup
Syntactically delimited characters added to the data of a document to
represent its structure. There are four different kinds of markup:
descriptive markup (tags), references, markup declarations, and
processing instructions.
media type
an Internet Media Type, as per IMEDIA.
message entity
a head and body. The head is a collection of name/value fields, and
the body is a sequence of octets. The head defines the content type
and content transfer encoding of the body.
numeric character reference
markup that refers to a character by its code position in the document
character set.
SGML document
A sequence of characters organized physically as a set of entities and
logically into a hierarchy of elements. An SGML document consists of
data characters and markup; the markup describes the structure of the
information and an instance of that structure.
start-tag
Descriptive markup that identifies the start of an element and
specifies its generic identifier and attributes.
syntax-reference character set
A coded character set whose range includes all characters used for
markup; e.g. name characters and delimiter characters.
tag
Markup that delimits an element. A tag includes a name which refers to
an element declaration in the DTD, and may include attributes.
text entity
A finite sequence of characters. A text entity typically takes the
form of a sequence of octets with some associated character encoding
scheme, transmitted over the network or stored in a file.
typical
Typical processing is described for many elements. This is not a
mandatory part of the specification but is given as guidance for
designers and to help explain the uses for which the elements were
intended.
URI
A Uniform Resource Identifier is a formatted string that serves as an
identifier for a resource, typically on the Internet. URIs are used in
HTML to identify the anchors of hyperlinks. URIs in common practice
include Uniform Resource Locators (URLs) and Relative URLs.
HTML viewer
A component of a distributed system that presents an interface and
processes requests on behalf of a user; for example, a www browser or
a mail HTML viewer.
WWW
The World-Wide Web is a hypertext-based, distributed information
system created by researchers at CERN in Switzerland.
http://www.w3.org/
HTML Coded Character Set
REFERENCE DESCRIPTION
� - Unused
Horizontal tab
Line feed
- Unused
Carriage Return
- Unused
Space
! Exclamation mark
" Quotation mark
# Number sign
$ Dollar sign
% Percent sign
& Ampersand
' Apostrophe
( Left parenthesis
) Right parenthesis
* Asterisk
+ Plus sign
, Comma
- Hyphen
. Period (fullstop)
/ Solidus (slash)
0 - 9 Digits 0-9
: Colon
; Semi-colon
< Less than
= Equals sign
> Greater than
? Question mark
@ Commercial at
A - Z Letters A-Z
[ Left square bracket
\ Reverse solidus (backslash)
] Right square bracket
^ Caret
_ Horizontal bar (underscore)
` Acute accent
a - z Letters a-z
{ Left curly brace
| Vertical bar
} Right curly brace
~ Tilde
- Ÿ Unused
Non-breaking Space
¡ Inverted exclamation
¢ Cent sign
£ Pound sterling
¤ General currency sign
¥ Yen sign
¦ Broken vertical bar
§ Section sign
¨ Umlaut (dieresis)
© Copyright
ª Feminine ordinal
« Left angle quote, guillemotleft
¬ Not sign
Soft hyphen
® Registered trademark
¯ Macron accent
° Degree sign
± Plus or minus
² Superscript two
³ Superscript three
´ Acute accent
µ Micro sign
¶ Paragraph sign
· Middle dot
¸ Cedilla
¹ Superscript one
º Masculine ordinal
» Right angle quote, guillemotright
¼ Fraction one-fourth
½ Fraction one-half
¾ Fraction three-fourths
¿ Inverted question mark
À Capital A, grave accent
Á Capital A, acute accent
 Capital A, circumflex accent
à Capital A, tilde
Ä Capital A, dieresis or umlaut mark
Å Capital A, ring
Æ Capital AE dipthong (ligature)
Ç Capital C, cedilla
È Capital E, grave accent
É Capital E, acute accent
Ê Capital E, circumflex accent
Ë Capital E, dieresis or umlaut mark
Ì Capital I, grave accent
Í Capital I, acute accent
Î Capital I, circumflex accent
Ï Capital I, dieresis or umlaut mark
Ð Capital Eth, Icelandic
Ñ Capital N, tilde
Ò Capital O, grave accent
Ó Capital O, acute accent
Ô Capital O, circumflex accent
Õ Capital O, tilde
Ö Capital O, dieresis or umlaut mark
× Multiply sign
Ø Capital O, slash
Ù Capital U, grave accent
Ú Capital U, acute accent
Û Capital U, circumflex accent
Ü Capital U, dieresis or umlaut mark
Ý Capital Y, acute accent
Þ Capital THORN, Icelandic
ß Small sharp s, German (sz ligature)
à Small a, grave accent
á Small a, acute accent
â Small a, circumflex accent
ã Small a, tilde
ä Small a, dieresis or umlaut mark
å Small a, ring
æ Small ae dipthong (ligature)
ç Small c, cedilla
è Small e, grave accent
é Small e, acute accent
ê Small e, circumflex accent
ë Small e, dieresis or umlaut mark
ì Small i, grave accent
í Small i, acute accent
î Small i, circumflex accent
ï Small i, dieresis or umlaut mark
ð Small eth, Icelandic
ñ Small n, tilde
ò Small o, grave accent
ó Small o, acute a9ccent
ô Small o, circumflex accent
õ Small o, tilde
ö Small o, dieresis or umlaut mark
÷ Division sign
ø Small o, slash
ù Small u, grave accent
ú Small u, acute accent
û Small u, circumflex accent
ü Small u, dieresis or umlaut mark
ý Small y, acute accent
þ Small thorn, Icelandic
ÿ Small y, dieresis or umlaut mark
Acknowledgements
This document owes much of its information to the following public
domain sources:
The HTML specification by Tim Berners-Lee and Daniel W. Connolly
Barebones guide to HTML by Kevin Werbach.
Extensions to HTML published by Netscape Communications Corporation
HTML Quick reference by Michael Grobe
NCSA HTML Primer
Netscape Colour Index
The META Tag of HTML by Davide Musella, National Research Council
HTML Reference Library By Stephen Le Hunte